<template>
  <div class="bar">

    <img class="logo" src="../images/SearchBarImages/logo.gif" alt="logo">

    <div class="search" style="display: inline">
      <form>
        <input class="txt" type="text" placeholder="请输入您需要搜索的内容...">
        <button class="btn" type="submit">搜索</button>
      </form>
    </div>

  </div>
</template>

<script>

export default {
  name: 'SearchBar'
}
</script>

<style scoped>
  .bar {
    width: 1000px;
    height: 150px;
    margin-left: 200px;
    margin-top: 25px;
  }

  .logo {
    float: left;
  }

  .search {
    margin-top: 50px;
    float: right;
  }

  .txt {
    height: 30px;
    width: 600px;
    border: red 2px solid;
    font-family: "Microsoft YaHei", SimSun, '\5b8b\4f53', sans-serif;
    font-size: 14px;

  }

  .btn {
    height: 32px;
    width: 100px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 5px;
    font-family: "Microsoft YaHei", SimSun, '\5b8b\4f53', sans-serif;
    color: white;
    text-align: center;
    background: red;
    border: none;
  }

</style>
